<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title> 新建采购单 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/icons-extra.css">
    <link rel="stylesheet" href="css/app.css">
    <!-- <link rel="stylesheet" href="css/listsearch.css"> -->
    <!-- <link href="./css/mui.picker.css" rel="stylesheet" /> -->
    <!-- <link href="./css/mui.poppicker.css" rel="stylesheet" /> -->
    <style type="text/css">
        #supplier-box ul {
            background: #fff
        }

        #supplier-box ul li {
            padding: 11px 13px;
        }

        #supplier-box ul li .mui-media-body {
            font-size: 12px;
        }

        /* .mui-input-row label{ text-align: right; } */

        .mui-input-row-textarea {
            height: initial !important
        }

        #mui-card-form .mui-card-footer {
            justify-content: flex-end;
        }

        #procurement-add .mui-card-header {
            justify-content: flex-end
        }

        #procurement-add .mui-card-header span {
            font-size: 13px;
            ;
        }

        #goodsList li a img {
            max-width: 90px;
            height: 90px;
        }

        #goodsList li a div p {
            font-size: 12px;
            margin-bottom: 1px;
        }

        #goodsList li a div p span {
            font-size: 15px;
        }

        #goodsList li a div h4 {
            font-size: 15px;
        }

        #supplier-search .mui-card .mui-card-footer {
            justify-content: flex-end
        }

        .mui-table-view-cell:after {
            right: 15px;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/mui.min.js"></script>
    <script src="js/song.js"></script>
    <script src="js/webuploader.min.js"></script>
    <script src="js/uploader.js"></script>
</head>

<body>
    <header id="header" class="mui-bar mui-bar-nav">

        <h1 class="mui-title">新建采购单</h1>
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <!-- <a id="promptBtn" class="mui-icon mui-icon-search mui-pull-right"></a> -->
    </header>

    <div class="mui-content" id="procurement-add">
        <div class="mui-card">
            <div class="mui-card-header">
                <span>单据编号：DY8211378915</span>
            </div>
            <div class="mui-input-group mui-card-content">
                <div class="mui-input-row">
                    <label>选择供应商</label>
                    <select id="select-href1" class="mui-input-clear input_bottom_line" data-addhref="supplierAdd.html">
                        <optgroup label="供应商列表">
                            <option value="0">点击添加供应商</option>
                            <option value="供应商1">供应商1</option>
                            <option value="供应商2">供应商2</option>
                            <option value="供应商3">供应商3</option>
                            <option value="供应商3">供应商3</option>
                            <option value="供应商3">供应商3</option>
                        </optgroup>
                        <optgroup label="新增供应商">
                            <option value="-1">点击新增供应商</option>
                        </optgroup>
                    </select>
                </div>
                <script>
                    $("#select-href1").change(function () {
                        var select_href = $(this).attr("data-addhref");
                        // alert(select_href);
                        if ($("#select-href1").val() == "-1") {
                            gotoUrl(select_href);
                            return;
                        }
                    })
                </script>
                <div class="mui-input-row">
                    <label>选择产品类别</label>
                    <select class="mui-input-clear input_bottom_line">
                        <option value="0">请选择产品类别</option>
                        <option value="1">男鞋</option>
                        <option value="2">女鞋</option>
                        <option value="3">女鞋</option>
                        <option value="5">女鞋</option>
                    </select>
                </div>
            </div>
        </div>
        <!-- <div  id="supplier-search">
            <form class="mui-content-padded"  >
                <div class="mui-input-row mui-search" id="">
                    <input type="search" class="mui-input-clear" placeholder="如：货品编号">
                </div>
            </form>
        </div> -->
        <div id="procurement-list">
            <ul class="mui-table-view " id="goodsList">
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="./images/cbd.jpg">
                        <div class="mui-media-body">
                            <h4 class="title">商品货号编号</h4>
                            <p class="mui-ellipsis"> 货品价格：
                                <span>20.00</span>&nbsp;&nbsp;&nbsp; 实际价格：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="20.00">
                                </span>
                            </p>
                            <p class="mui-ellipsis">
                                采购数量：
                                <span class="input_nor_line">
                                    <input class="input_nor input_nor_line" type="text" value="100"> </span>
                                货品箱规格：
                                <span class="input_nor_line">
                                    <select name="" id="" class="input_nor">
                                        <option value="">规格1</option>
                                        <option value="">规格2</option>
                                        <option value="">规格3</option>
                                        <option value="">规格1</option>
                                    </select>
                                </span>
                            </p>
                            <p class="mui-ellipsis">
                                总金额：
                                <span>10000.00</span>
                            </p>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="./images/cbd.jpg">
                        <div class="mui-media-body">
                            <h4 class="title">商品货号编号</h4>
                            <p class="mui-ellipsis"> 货品价格：
                                <span>20.00</span>&nbsp;&nbsp;&nbsp; 实际价格：
                                <span class="input_nor_line">
                                    <input class="input_nor" type="text" value="20.00">
                                </span>
                            </p>
                            <p class="mui-ellipsis">
                                采购数量：
                                <span class="input_nor_line">
                                    <input class="input_nor input_nor_line" type="text" value="100"> </span>
                                货品箱规格：
                                <span class="input_nor_line">
                                    <select name="" id="" class="input_nor">
                                        <option value="">规格1</option>
                                        <option value="">规格1</option>
                                        <option value="">规格1</option>
                                        <option value="">规格1</option>
                                    </select>
                                </span>
                            </p>
                            <p class="mui-ellipsis">
                                总金额：
                                <span>10000.00</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="mui-content-padded">
            <button type="button" style="width: 100%;" id="popup-area-show" class="mui-btn mui-btn-success  mui-icon mui-icon-plus">点击添加货品</button>
        </div>

        <div class="mui-card">

            <div class="mui-input-group mui-card-content">


                <div class="mui-input-row">
                    <label>合计总箱数：</label>
                    <input type="text" class="mui-input-clear" id="" value="1000">
                </div>
                <div class="mui-input-row">
                    <label>总金额：</label>
                    <input type="text" class="mui-input-clear" id="" value="10000.00">
                </div>
                <div class="mui-input-row">
                    <label>实付金额：</label>
                    <input type="text" class="mui-input-clear" id="" value="" placeholder="0.00">
                </div>
                <div class="mui-input-row">
                    <label>现金：</label>
                    <input type="text" class="mui-input-clear" id="" value="" placeholder="0.00">
                </div>
                <div class="mui-input-row">
                    <label>刷卡：</label>
                    <input type="text" class="mui-input-clear" id="" value="" placeholder="0.00">
                </div>
                <div class="mui-input-row mui-input-row-textarea">
                    <label>备注</label>
                    <textarea id="textarea" rows="2" placeholder=""></textarea>
                </div>
            </div>
            <div class="mui-card-footer">
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary">提交保存</button>
                </div>
            </div>
        </div>



    </div>
    <nav class="mui-bar mui-bar-tab" id="bar-down">

        <div class="mui-tab-item mui-active" data-href="./index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </div>
        <div class="mui-tab-item" data-href="./sales.html">
            <span class="mui-icon mui-icon-star"> </span>
            <span class="mui-tab-label">销售管理</span>
        </div>
        <div class="mui-tab-item" data-href="./procurement.html">
            <span class="mui-icon mui-icon-download"> </span>
            <span class="mui-tab-label">采购管理</span>
        </div>
        <div class="mui-tab-item" data-href="./warehouse.html">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="mui-tab-label">仓库管理</span>
        </div>
        <div class="mui-tab-item" data-href="./basis.html">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">基础管理</span>
        </div>
    </nav>


    <!-- 弹出层 -->
    <div id="popup-area" class="popup-area">
        <div id="popup-area-tit" class="popup-area-tit">
            <form action="" class="mui-content-padded">
                <input type="search" class="mui-input-clear" placeholder="请输入编号搜索">
            </form>
        </div>
        <div id="popup-area-box" class="popup-area-box">
            <ul>
              
               
                <li class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="pro1" type="checkbox">
                    <label class="list-show">
                        <div class="title"> s006 </div>
                        <div class="mui-ellipsis"> 供应商供应商供应商供应商 </div>
                        <div class="df">
                            <span>货品价格：
                                <b>15.00</b>
                            </span>
                            <span>实际价格：
                                <b>12.00</b>
                            </span>
                        </div>
                        <div class="df">
                            <span>库存数量：
                                <b>12000</b>
                            </span>
                        </div>
                    </label>
                </li>
                <li class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="pro1" type="checkbox">
                    <label class="list-show">
                        <div class="title"> s006 </div>
                        <div class="mui-ellipsis"> 供应商供应商供应商供应商 </div>
                        <div class="df">
                            <span>货品价格：
                                <b>15.00</b>
                            </span>
                            <span>实际价格：
                                <b>12.00</b>
                            </span>
                        </div>
                        <div class="df">
                            <span>库存数量：
                                <b>12000</b>
                            </span>
                        </div>
                    </label>
                </li>
                <li class="mui-input-row mui-checkbox mui-left">
                    <input name="checkbox" value="pro1" type="checkbox">
                    <label class="list-show">
                        <div class="title"> s006 </div>
                        <div class="mui-ellipsis"> 供应商供应商供应商供应商 </div>
                        <div class="df">
                            <span>货品价格：
                                <b>15.00</b>
                            </span>
                            <span>实际价格：
                                <b>12.00</b>
                            </span>
                        </div>
                        <div class="df">
                            <span>库存数量：
                                <b>12000</b>
                            </span>
                        </div>
                    </label>
                </li>
            </ul>

        </div>
        <div id="popup-area-btn" class="df">
            <!-- 放在第一个 -->
            <a class="mui-btn-danger " id="popup-area-close"> 关闭窗口 </a>
            <a class="mui-btn-primary" href="">立即提交</a>
        </div>
    </div>

    <div class="jxc-mask"></div>



    <!-- 弹出层 -->


    <!--  图片修改弹出层 -->

    <div id="guige-boxNumber" style="display:none; ">
        <div class="title"> 编辑商品图 </div>
        <form class="">

            <ul class="logo">
                <div id="tupian"></div>
                <input type="hidden" id="txtImgUrl" name="txtImgUrl" class="input normal upload-path" />
                <div class="upload-box upload-img"></div>
            </ul> 
        </form>
        <button type="button" class="mui-btn mui-btn-success mui-btn-block" id=""> 确认编辑 </button>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".upload-img").InitUploader({
                filesize: "10240",
                // sendurl: "/tools/upload_ajax.ashx",
                swf: "/scripts/webuploader/uploader.swf",
                filetypes: "gif,jpg,png,bmp"
            });
        })
 
        //  展开选择框
        $("#goodsList li a img").on("click", function () {
            showBOX()
        })
        //  隐藏选择框
        $(".jxc-mask").on("click", function () {
            hideBOX()
        })
    </script>
    <!--  图片修改弹出层 -->


    <script>
        $("#popup-area-close,.jxc-mask").on("click", function () {
            hidePopup()
        })
        $("#popup-area-show").on("click", function () {
            showPopup()
        })

        mui.init({});
        // 底部导航 链接
        mui("#bar-down").on("tap", "div", function () {
            var href = this.getAttribute("data-href");
            if (href !== "") {
                gotoUrl(href);
                return;
            }
        }, false);
    </script>
</body>

</html>